(function (window) {

	//这是初始化的数据
	console.log(window.localStorage.getItem("todoList"))

	var list = JSON.parse(window.localStorage.getItem("todoList")) ==null ? [] : JSON.parse(window.localStorage.getItem("todoList"))
	const vm = new Vue({
		el: ".todoapp",
		data:{
			isComplete:"completed",
			name:"",
			list:list,
			listShow:list,
			showCompletedButton:"clear-completed",
			
		},
		methods:{
			add(){
				//获取元素最后一个的id,然后自增一作为新的id
				if(this.list.length-1 < 0) {
					id = 1
				} else {
					id = this.list[this.list.length-1].id +1

				}
				var obj3 = {
						name: this.name,
						id: id,
						isComplete: false,
					}
				this.list.push(obj3)
				this.name=""
			},
			del(id){
				this.listShow = this.list= this.listShow.filter(item=>item.id!==id) //删除指定的数组元素
			},
			modif(index){
				if (this.ucount !=0) { //是否有完成的,有的就展示
					this.showCompletedButton = "clear-completed"
				} else {
					this.showCompletedButton = "hidden"
				}
			},
			taggleAll(){
				console.log(this.ucount)
				if(this.ucount > 0) {
					this.list.forEach(item=>item.isComplete=true)
					this.showCompletedButton = "clear-completed"
 				} else {
					this.list.forEach(item=>item.isComplete=false)
					this.showCompletedButton = "hidden"
				}
			},
			clearAll(){ //清除完成了的数据
				this.listShow = this.list = this.listShow.filter(item=>item.isComplete!=true)
			},
			select(type){
				if (type == "All") {
					this.listShow = this.list
				} else if(type =="Completed") {
					this.listShow = this.list.filter(item=>item.isComplete == true)
				} else {
					this.listShow = this.list.filter(item=>item.isComplete != true)
				}
			}
		},
		computed:{
			ucount(){
				return this.list.filter(item=>item.isComplete !== true).length  //没有完成任务的数量
			},
		},

		//监听数据修改之后的变化
		watch:{
			list:{
				deep:true,
				handler(value){
					window.localStorage.setItem("todoList",JSON.stringify(value))
				}
			}
		}
	
	})

})(window);
